<template>
  <div class="summarize-study-detail">
    <w-nav-bar
      title="学习详情"/>
    <!--标题-->
    <h1 class="title">{{ model.title }}</h1>
    <p class="time">{{ model.dateStr }}</p>
    <div
      v-if="model.pic"
      class="img-bg">
      <img
        :src="model.mStudyDetailPic"
        alt="">
    </div>
    <p class="describe">{{ model.describe }}</p>
    <w-marked-parsing :datastr="model.content"/>
  </div>
</template>

<script>
  import StudyModel from '@/models/web/StudyModel'
  import WMarkedParsing from '@/components/global/marked/parsing'

  export default {
    name: 'SummarizeStudyDetail',
    data() {
      return {
        /**
         * 学习模型
         */
        model: new StudyModel ()
      }
    },
    components: {
      WMarkedParsing
    },
    methods: {
      /**
       * 获取数据
       */
      getData() {
        this.model._id = this.$route.query.id
        this.model.getDetail().w_then()
      }
    },
    mounted() {
      this.getData ()
    }
  }
</script>

<style lang="scss" scoped>
  .summarize-study-detail {
    padding: 10px;

    > .title {
      font-size: 20px;
      text-align: center;
      color: #ef4f4f;
    }

    > .time {
      font-size: 14px;
      text-align: center;
      color: #999;
    }

    > .img-bg {
      img {
        width: 100%;
        vertical-align: middle;
      }
    }

    > .describe {
      font-size: 16px;
      text-align: center;
      color: #999;
      line-height: 22px;
    }
  }
</style>
